<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tail log</title>
	<style type="text/css">
		a:link,a:visited{
			text-decoration:none;  /*超链接无下划线*/
		}
		a:hover{
			text-decoration:underline;  /*鼠标放上去有下划线*/
		}
	</style>
<script src="http://localhost:8080/websockettail_war_exploded/static/js/jquery-1.10.1.min.js"></script>
</head>
<body>
	<div id="log-container" style="height: 800px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
		<div>
		</div>
	</div>
	<button onclick="closeWebSocket()">关闭WebSocket连接</button>
	<button onclick="openWebSocket()">刷新日志</button>
	<button ><a href="../index.html">返回首页</a></button>

	Welcome chat<br/>
	<input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>
	<div id="message">
	</div>
</body>
<script>
	var websocket = null;
	//判断当前浏览器是否支持WebSocket
	if ('WebSocket' in window){
		websocket = new WebSocket('ws://localhost:8080/websockettail_war_exploded/websocket');
		//websocket = new WebSocket('ws://localhost:8080/log');
	}else{
		alert('当前浏览器 Not support websocket')
	}

	websocket.onmessage = function(event) {
		// 接收服务端的实时日志并添加到HTML页面中
		$("#log-container div").append(event.data).append('<br>');
		// 滚动条滚动到最低部
		$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
	};

	//打开 WebSocket连接
	function openWebSocket() {
		window.location.reload();
	}

	//关闭WebSocket连接
	function closeWebSocket() {
		websocket.close();
	}
	//连接发生错误的回调方法
	websocket.onerror = function () {
		alert("WebSocket连接发生错误");
	};

	//连接成功建立的回调方法
	websocket.onopen = function () {
		alert("WebSocket连接成功");
	}

	//接收到消息的回调方法
	//  websocket.onmessage = function (event) {
	//    alert(event.data);
	//}

	//连接关闭的回调方法
	websocket.onclose = function () {
		alert("WebSocket连接关闭");
	}
	//发送消息
	function send(){
		var message = document.getElementById('text').value;
		websocket.send(message);
		$("#text").val("");
	}
</script>
</body>
</html>